<!DOCTYPE html>
[#escape x as (x)!?html]
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>头像设置 - ${site.seoTitle} - Powered by JPROCMS</title>
    [#include '../includes/common_res.html'/]
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/blueimp-file-upload/css/jquery.fileupload.css"
    />
    <link
      rel="stylesheet"
      href="${resource}/static/plugins/cropperjs/dist/cropper.min.css"
    />
    <style>
      /* Limit image width to avoid overflow the container */
      img {
        max-width: 100%; /* This rule is very important, please do not ignore this! */
      }
    </style>
  </head>
  <body>
    [#assign shadowNav=true /] [#include '../includes/header.html'/]
    <div class="container mt-3">
      <div class="row">
        <div class="col-sm-3">
          <div class="list-group mt-2">
            [#assign settings = 'avatar'/] [#include 'user_left.html'/]
          </div>
        </div>
        <div class="col-sm-9">
          <h3 class="py-3 border-bottom">头像设置</h3>
          <div class="mt-3" style="max-height: 500px" id="avatarImgDiv"></div>
          <div class="mt-3">
            <span class="btn btn-success fileinput-button">
              <i class="fas fa-plus"></i>
              <span>上传头像</span>
              <input
                id="fileupload"
                type="file"
                name="avatarFile"
                accept="${config.uploadConfig.imageInputAccept}"
              />
            </span>
            <div id="progress" class="progress mt-2" style="display: none">
              <div class="progress-bar progress-bar-success"></div>
            </div>
            <div id="progressfail" class="invalid-feedback"></div>
          </div>
        </div>
      </div>
    </div>

    <div id="pictureModel" class="modal fade bd-example-modal-lg" tabindex="-1">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
          <div class="modal-body">
            <div id="imageDiv" class="mt-2"></div>
            <div class="clearfix mt-2">
              <div
                class="image-preview float-left border"
                style="width: 80px; height: 80px; overflow: hidden"
              ></div>
              <div
                class="image-preview float-left border ml-2 rounded-circle"
                style="width: 40px; height: 40px; overflow: hidden"
              ></div>
              <form
                class="float-right pt-2"
                id="imageCutForm"
                action="${api}/member/image-crop"
                method="post"
              >
                <input type="hidden" id="url" name="url" />
                <input type="hidden" id="x" name="x" />
                <input type="hidden" id="y" name="y" />
                <input type="hidden" id="width" name="width" />
                <input type="hidden" id="height" name="height" />
                <button type="submit" class="btn btn-primary">提交</button>
              </form>
            </div>
          </div>
        </div>
      </div>
    </div>

    [#include '../includes/footer.html'/] [#include '../includes/inc_msg.html'/]
    <script src="${resource}/static/plugins/blueimp-file-upload/js/vendor/jquery.ui.widget.min.js"></script>
    <script src="${resource}/static/plugins/blueimp-file-upload/js/jquery.iframe-transport.min.js"></script>
    <script src="${resource}/static/plugins/blueimp-file-upload/js/jquery.fileupload.min.js"></script>
    <script src="${resource}/static/plugins/blueimp-file-upload/js/jquery.fileupload-process.min.js"></script>
    <script src="${resource}/static/plugins/blueimp-file-upload/js/jquery.fileupload-validate.min.js"></script>
    <script src="${resource}/static/plugins/cropperjs/dist/cropper.min.js"></script>
    <script src="${resource}/static/plugins/jquery-cropper/dist/jquery-cropper.min.js"></script>
    <script>
      function loginedCallBack(response){
           //登录状态
           $("#avatarImgDiv").append("<img class=\"rounded\" style=\"width:150px;height:150px;\" src=\""+response.data.data.avatar+"\">")
       }
       $(function () {
         Cms.getLoginUser('${base}','${api}',true,loginedCallBack)
         const token = sessionStorage.getItem("accessToken");
         $('#fileupload').fileupload({
           url: '${api}/member/update-avatar',
           dataType: false,
           maxFileSize: ${config.uploadConfig.imageLimitByteStr},
           beforeSend: function(xhr, data) {
              xhr.setRequestHeader('Authorization', 'Bearer '+token)
              xhr.setRequestHeader('Tenant-Id', Cms.getTenantId(),)
           },
           done: function (e, data) {
             var url = data.result.data;
             //header从storage取的头像 立即更新
             sessionStorage.setItem("avatar",url)
             if (data.result.data) {
               // 上传成功后立即显示图片会出现图片不存在的问题，可能上传后服务器需要一个反应时间，经测试至少要延迟1000毫秒才能确保正确显示图片。
               setTimeout(function () {
                 $('#imageDiv').append($('<img>').attr('id', 'image').attr('src', url).css('max-height', '400px'));
                 $('#url').val(url);
                 $('#image').cropper({
                   aspectRatio: 1,
                   autoCropArea: 1,
                   viewMode: 2,
                   minCropBoxWidth: 16,
                   minCropBoxHeight: 16,
                   zoomable: false,
                   preview: '.image-preview',
                   crop: function (event) {
                     $('#x').val(Math.floor(event.detail.x));
                     $('#y').val(Math.floor(event.detail.y));
                     $('#width').val(Math.floor(event.detail.width));
                     $('#height').val(Math.floor(event.detail.height));
                   }
                 });
               }, 1000);
               // 要在显示图片前显示对话框，否则会出现图片大小无法计算的问题。为了让显示对话框和显示图片更好的衔接，延迟500毫秒显示对话框。
               setTimeout(function () {
                 $('#pictureModel').modal('show');
                 $('#imageDiv').empty();
               }, 500);
             } else {
               showError(data.msg);
             }
           },
           fail: function (e, data) {
             showErrorPre(data.jqXHR);
           },
           start: function (e) {
             $('#progressfail').text('').hide();
             $('#progress').show();
             $('#progress .progress-bar').css('width', '0%');
           },
           always: function (e) {
             setTimeout(function () {
               $('#progress').hide('fast');
               $('#progress .progress-bar').css('width', '0%');
             }, 1000);
           },
           progress: function (e, data) {
             var progress = Math.floor(data.loaded / data.total * 100);
             $('#progress .progress-bar').css('width', progress + '%');
           },
           processfail: function (e, data) {
             var file = data.files[data.index];
             if (data.files.error && file.error) {
               $('#progressfail').text(file.error).show();
             }
           },
           messages: {
             acceptFileTypes: '该文件类型不允许上传',
             maxFileSize: '文件太大'
           }
         }).prop('disabled', !$.support.fileInput).parent().addClass($.support.fileInput ? undefined : 'disabled');

         $('#imageCutForm').validate({
           submitHandler: function (form,event) {
             var body = $(form).serializeJSON();
             const token = sessionStorage.getItem("accessToken")
             request.post(form.action, body,{
                 headers: {
                   'Tenant-Id': Cms.getTenantId(),
                   'Authorization':'Bearer '+token
                 }
             }).then(function (response) {
               var cutUrl = response.data.data.url;
               sessionStorage.setItem("avatar",cutUrl)
               axios.post('${api}/member/update-avatar-url', {"url":cutUrl},{
                 headers: {
                   'Tenant-Id': Cms.getTenantId(),
                   'Authorization':'Bearer '+token
                 }
               }).then(function (response) {
                   var data = response.data;
                   if (data === null) return;
                   if (data.code !== 0) {
                     alertTip(data.msg);
                   } else {
                     successTip();
                   }
                   location.reload();
                 });
               });
           }
         });

       });
    </script>
  </body>
</html>
[/#escape]
